<template>
  <div class="order-ot">
    <div class="order">
      <loading :state="loading"></loading>
      <good-show :goods="goods"></good-show>
      <div class="address" @click="toAddress">
        <div class="first-a">
          <svg aria-hidden="true" class="ad">
            <use xlink:href="#icon-gwc_dw"></use>
          </svg>
          <div class="edit" v-if="toggleAddress">为了能及时准确的将您的商品送到您的手中,请认真填写您的个人信息
          </div>
          <div class="edit" v-else>
            <div class="address-a">
              <div class="receive">收货人：{{address.name}}</div>
              <div class="phone">{{address.phone}}</div>
            </div>
            <div class="address-a">
              收货地址:{{address.province + address.city + address.area + address.detail}}
            </div>
          </div>
          <svg aria-hidden="true" class="edit-lo">
            <use xlink:href="#icon-gwc_bj"></use>
          </svg>
        </div>
      </div>
      <textarea placeholder="选填：备注信息（50字以内）" maxlength="50" class="remark"
                v-model="remark"></textarea>
      <div class="sumPrice">
        邮费：<span>{{postage | keepTwoNum}}</span><br>
        小计：<span>{{totalPrice| keepTwoNum}}</span>
      </div>
      <div class="sumPrice">
        合计：<span>{{(totalPrice + postage )| keepTwoNum}}</span>
      </div>
    </div>
    <div class="cart-bottom">
      <div class="total">
        <div>共{{totalNum}}件</div>
        <!--<div class="sum">合计 <span class="total-price"></span></div>-->
      </div>
      <div class="share-btn" @click="toOption">去付款</div>
    </div>
  </div>
</template>

<script>
  import goodShow from '../../components/common/goodsShow';
  import Cell from '../../components/common/Cell';
  import {Toast} from 'vant';
  import Vue from 'vue';

  Vue.use(Toast);
  export default {
    components: {
      Cell,
      goodShow
    },
    data() {
      return {
        address: {},
        show: false,
        loading: true,
        toggleAddress: true,
        remark: '',
        money: 0,
        products: [],
        totalPrice: 0,
        reMoney: ''
      };
    },
    props: {},
    filters: {
      keepTwoNum: function (val) {
        let value = Number(val);
        return value.toFixed(2);
      }
    },
    computed: {
      goods() {
        return this.$store.state.cart.selectGoods;
      },
      postage() {
        return this.totalPrice >= 29.8 ? 0.00 : 6.00;
      },
      totalNum() {
        let total = 0;
        this.goods.forEach((good) => {
          good.list.forEach((data) => {
            total += parseInt(data.num);
          });
        });
        return total;
      }
    },
    methods: {
      toAddress() {
        if (this.toggleAddress === true) {
          this.$router.push('new-address');
        } else {
          this.$router.push('buy-address');
        }
      },
      create(data) {
        this.$Sale.create(data).then((res) => {
          this.loading = false;
          this.$store.commit('changeSelectGoods', []);
          let data = {
            targetType: res.data.targetType,
            targetId: res.data.targetId,
            money: res.data.money,
            consigneeStyle: res.data.tips.key,
            consigneeName: res.data.tips.value
          };
          this.$router.push({
            name: 'pay-option',
            query: data
          });
        }, () => {
          this.loading = false;
        });
      },
      toOption() {
        let self = this;
        self.data = {
          areaId: this.address.id,
          remark: this.remark,
          products: this.products
          // day: this.$store.state.sale.date,
          // time: this.$store.state.sale.time,
        };
        if (self.data.areaId === '') {
          Toast('请填写地址');
        } else {
          this.loading = true;
          console.log(111111);
          this.create(self.data);
        }
      }
//            handle(val) {
//                this.remark = val;
//            }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    beforeCreate() {
      // 可以在这加个loading事件，在加载实例时触发
      // 这个阶段实例的data、methods是读不到的
    },
    created: function () {
      // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
      // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
      // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
    },
    beforeMount() {
      // 相关的 render 函数首次被调用。
    },
    mounted() {
      let that = this;
      this.goods.forEach((pro) => {
        if (pro.list.length > 0) {
          pro.list.forEach((dat) => {
            let good = {};
            // if (pro.region.id === '2188') {
            //   that.bag = true;
            // } else if (pro.region.id === '3488') {
            //   that.toggleProduct = false;
            // }
            console.log(dat, 'datdatdatdat');
            that.$set(good, 'region', pro.region.id);
            that.$set(good, 'num', dat.num);
            that.$set(good, 'normId', dat.product.norm_id);
            that.$set(good, 'productId', dat.product.id);
            that.$set(good, 'price', dat.product.price);
            that.products.push(good);
          });
        }
      });
      this.$Sale.price({products: this.products}).then(res => {
        this.totalPrice = res.data;
      });
      let address = this.$route.query;
      if (address.name) {
        this.toggleAddress = false;
        this.address = address;
        this.loading = false;
      } else {
        this.$UserReq.address('get').then(res => {
          this.loading = false;
          if (res.data.name) {
            this.toggleAddress = false;
            this.address = res.data;
          } else {
            this.toggleAddress = true;
          }
        }, () => {
          this.loading = false;
        });
      }
      // 挂载元素，获取到DOM节点
      // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
    },
    beforeUpdate() {
      // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
    },
    updated() {
      //  如果对数据统一处理，在这里写上相应函数
      // 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
    },
    beforeDestroy() {
      // 可以做一个确认停止事件的确认框
    },
    destroyed() {
      // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
    },
    activated() {
    }
  };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl"
  .order-ot
    background: linear-gradient(to bottom right, #923df0, #721fd9);
    .order
      padding-bottom vw(50)

  .address
    background-color: #fff;
    font-size: vw(14);
    box-sizing: border-box;
    padding: vw(25) vw(10);
    margin 0 vw(15)
    border-radius vw(5)
    display: flex;
    justify-content space-between
    align-items: center;
    line-height 1.5
    color #999
    .first-a
      display flex
      width 100%
      line-height: 1;
      justify-content space-between
      align-items center
      .ad
        width vw(13)
        height vw(18)
        fill #c8c8c8
      .edit-lo
        width vw(17)
        height vw(17)
        fill #c8c8c8
      .address-a
        display: flex;
        justify-content space-between
        color #333
        font-size word14
        line-height 1.5
        .receive
          margin-right vw(30)
    .edit
      width vw(280)

  .remark
    border: none;
    width: 92vw;
    font-size: 3.7vw;
    line-height: vw(20);
    border-radius vw(5)
    margin: vw(10) vw(15) vw(5);
    background-color: #fff;
    box-sizing: border-box;
    padding vw(10)

  .warn
    font-size vw(12)
    margin 0 vw(15)
    line-height 1.5
    color main-color

  .tips
    font-size vw(12)
    margin vw(10) vw(40)
    line-height 1.5
    color #999
    span
      color main-color
    .des
      margin vw(10) 0
    .focus
      color main-color
      margin vw(10) 0

  .sumPrice
    text-align right
    padding-right vw(15)
    font-size vw(14)
    color #999
    line-height 1.5
    margin-bottom vw(15)
    span
      color white
      font-size vw(16)

  .cart-bottom
    width: 100%;
    height: vw(45);
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display flex
    align-items center
    justify-content space-between
    .total
      display: flex;
      font-size: word14;
      color: #333;
      margin-left vw(34)
      .sum
        color #999
        margin-left vw(10)
        .total-price
          color main-color
    .share-btn
      width: vw(100)
      background: gradient-color
      font-size 3.7vw
      color: #fff
      text-align: center
      height: vw(45)
      line-height: vw(45)
    .convert-btn
      background: gradient-color
      font-size 4.3vw
      color: #fff
      margin-right 3vw
      text-align: center
      border-radius 8vw
      height: vw(38)
      padding 0 5vw
      line-height: vw(38)

  .van-popup--bottom
    border-top-left-radius 5vw
    border-top-right-radius 5vw
    h3
      text-align center
      margin-top vw(30)
      font-size vw(20)
      color #333
    .line
      height 1px
      width 80vw
      margin vw(12) auto
      background-color #dbdbdb
    .refund-price
      text-align center
      color #333
      font-size word14
    input
      height vw(30)
      line-height vw(30)
      text-align center
      width 100vw
      font-size vw(24)
      margin-top vw(35)
      margin-bottom vw(30)
    input:
    :-webkit-input-placeholder
      color rgba(230, 59, 92, .28)
    .out
      display flex
      justify-content space-around
      margin-bottom vw(30)
      div
        width vw(150)
        height vw(45)
        line-height vw(45)
        font-size word14
        box-sizing border-box
        border-radius vw(22.5)
        text-align center
      .cancel
        color #999
        border(#999)
      .sure
        color #fff
        background gradient-color
</style>
